<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>Quick Hotel</title>
<%@include file="../link.html"%>
<script type="text/javascript">
$(document).ready(function() {
	//房间统计饼状图
    var pieChart = Highcharts.chart('pieChart', {
    chart: {
        spacing : [0, 0 , 0, 0]
    },
    title: {
        floating:true,
        text: '房间占比统计'
    },
    tooltip: {//鼠标悬浮框
        pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.2f} %',//说明
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            },
            point: {
                events: {
                    mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                    	console.log(e);
                    	pieChart.setTitle({
                            text: e.target.name+ '\t'+ Math.floor(e.target.percentage*100)/100+'%' //标题
                        });
                    }
                }
            },
        }
    },
    series: [{
        type: 'pie',
        innerSize: '80%',
        name: '所占比例',
        data: [<%=request.getAttribute("roomStatistic")%>]
    }]
    }, function(c) { // 图表初始化完毕后的会掉函数
    	// 环形图圆心
    	var centerY = c.series[0].center[1],
        	titleHeight = parseInt(c.title.styles.fontSize);
    	// 动态设置标题位置
    	c.setTitle({
       	 y:centerY + titleHeight/2
    	});
	});
	
	//用户入住统计柱状图
    var lineChart = Highcharts.chart('lineChart',{
        chart: {
            type: 'line'
        },
        title: {
            text: '近十日销售额'
        },
        subtitle: {
            text: ' '
        },
        xAxis: {
            categories: [
                <%=request.getAttribute("categories")%>
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '金额(元)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
        	line: {
                dataLabels: {
                    // 开启数据标签
                    enabled: true          
                },
                // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                enableMouseTracking: false
            }
        },
        series: [{name: '近十日销售金额',data :[<%=request.getAttribute("data")%>]}]
    });
});

function load(url) {
	$('#loadTarget').load(url);
}

layui.use('carousel', function(){
	var carousel = layui.carousel;
	carousel.render({
		elem: '#carousel',
		width: '820px' ,
		height: '400px',
		arrow: 'always',//始终显示箭头
	    anim: 'default', //切换动画方式
	    interval : 3000 //切换时间
	});
});
</script>

</head>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- 页面顶部 -->
		<%@include file="header.jsp"%>
		<!-- 引入导航栏 -->
		<%@include file="menu.jsp"%>

		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<div id="loadTarget">

				<!-- Main content -->
				<section class="content">
					<!-- Small boxes (Stat box) -->
					<div class="row">
						<div class="col-lg-3 col-xs-6">
							<!-- small box -->
							<div class="small-box bg-aqua">
								<div class="inner">
									<h3>${reserve_count}</h3>

									<p>预定数量</p>
								</div>
								<div class="icon">
									<i class="ion ion-ios-paper"></i>
								</div>
								<a href="#" class="small-box-footer">更多 <i
									class="fa fa-arrow-circle-right"></i></a>
							</div>
						</div>
						<!-- 预定数量 -->
						<div class="col-lg-3 col-xs-6">
							<!-- small box -->
							<div class="small-box bg-green">
								<div class="inner">
									<h3>
										${sales_count}<sup style="font-size: 15px">元</sup>
									</h3>

									<p>销售总额</p>
								</div>
								<div class="icon">
									<i class="ion ion-social-yen"></i>
								</div>
								<a href="#" class="small-box-footer">更多 <i
									class="fa fa-arrow-circle-right"></i></a>
							</div>
						</div>
						<!-- 销售总额 -->
						<div class="col-lg-3 col-xs-6">
							<!-- small box -->
							<div class="small-box bg-blue">
								<div class="inner">
									<h3>
										${person_count}<sup style="font-size: 15px">人</sup>
									</h3>

									<p>入住人数</p>
								</div>
								<div class="icon">
									<i class="ion ion-android-contacts"></i>
								</div>
								<a href="#" class="small-box-footer">更多 <i
									class="fa fa-arrow-circle-right"></i></a>
							</div>
						</div>
						<!-- 入住人数 -->
						<div class="col-lg-3 col-xs-6">
							<!-- small box -->
							<div class="small-box bg-yellow">
								<div class="inner">
									<h3>${room_count}<sup style="font-size: 15px">间</sup>
									</h3>

									<p>空余房间</p>
								</div>
								<div class="icon">
									<i class="ion ion-ios-home-outline"></i>
								</div>
								<a href="#" class="small-box-footer">更多 <i
									class="fa fa-arrow-circle-right"></i>
								</a>
							</div>
						</div>
						<!-- 空余房间 -->
					</div>
					<!-- /.row -->

					<div class="row">
						<!-- 折线图，销售金额 -->
						<div id="lineChart" class="col-sm-7"></div>

						<!-- 饼状图 -->
						<div id="pieChart" class="col-sm-5"></div>

					</div>
					<!-- /.row -->

					<div class='row'>
						<div class='col-sm-7' style="padding-top:15px;">
							<!-- 轮播图 -->
							<div class="layui-carousel" id="carousel">
								<div carousel-item>
									<div>
										<img src="images/category/01.jpg">
									</div>
									<div>
										<img src="images/category/02.jpg">
									</div>
									<div>
										<img src="images/category/03.jpg">
									</div>
									<div>
										<img src="images/category/04.jpg">
									</div>
									<div>
										<img src="images/category/05.jpg">
									</div>
								</div>
							</div>
						</div>
						
						<div class="col-sm-5" style="padding-top:15px;">
							<div class="box box-success box-solid">
								<div class="box-header with-border">
									<h3 class="box-title">快捷酒店POS</h3>
									<div class="box-tools pull-right">
										<button type="button" class="btn btn-box-tool" 
										data-widget="remove"><i class="fa fa-times"></i></button>
									</div>
								</div>
								
								<div class="box-body" style='align:center;font-size:20;'>
									<strong>
									Hightcharts + AdminLTE + layUI<br><br>
									Spring + SpringMVC + Hibernate<br><br>
									码云地址: https://gitee.com/a2798063/QuickHotel<br><br>
									&copy;15信管4班-第六小组
									</strong>
								</div>
							</div>
						</div>
					</div>

				</section>
				<!-- /.content -->
			</div>
			<!-- ./loadTarget -->
		</div>
		<!-- /.content-wrapper -->

		<footer class="main-footer">
			<div class="pull-right hidden-xs">
				<b>Version</b> 1.0.0
			</div>
			<strong>Copyright &copy; 2018年3月 .</strong>15信管4班第六组 All rights
			reserved.
		</footer>

	</div>
	<!-- ./wrapper -->
</body>
</html>
